<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MDnote</title>
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/css/treestyles.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    <script src="static/js/jquery.min.js" defer></script>
    <script src="static/js/bootstrap.bundle.min.js" defer></script>
    <script src="index.js" defer></script>
</head>
<body>

<!-- Modal -->
<div class="modal fade" id="Reg" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content rounded-4 shadow">
            <div class="modal-header p-5 pb-4 border-bottom-0">
                <h1 class="fw-bold mb-0 fs-2">注册MDnote账号</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-5 pt-0">
                <form class="">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-floating mb-3">
                                <input type="email" class="form-control rounded-3" id="RegEmail" placeholder="email"
                                       spellcheck="false">
                                <label for="RegEmail">邮箱</label>
                                <div id="emailExist" style="color: red; display: none;">该邮箱已注册</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-floating mb-3">
                                <input type="password" class="form-control rounded-3" id="RegPass" placeholder="Password" spellcheck="false">
                                <label for="RegPass">密码</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-floating mb-3">
                                <input type="password" class="form-control rounded-3" id="RegPassAgain" placeholder="Password" spellcheck="false">
                                <label for="RegPassAgain">确认密码</label>
                                <div id="passwordMismatch" style="color: red; display: none;">密码不一致</div>
                            </div>
                        </div>
                    </div>
                    <div class="row align-items-start">
                        <div class="col-md-9">
                            <div class="form-floating mb-3">
                                <input type="text" class="form-control rounded-3" id="VerCode"
                                       placeholder="Password" spellcheck="false">
                                <label for="VerCode">验证码</label>
                                <div id="VerCodeErr" style="color: red; display: none;">验证码错误</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <button type="button" class="btn btn-outline-primary btn-block" style="height: 58px;"
                                    id="VerCodeGet">获取验证码
                            </button>
                        </div>
                    </div>
                    <small class="text-muted">欢迎加入MDnote!</small>
                    <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="button" id="regisbutton">注册</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="login" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content rounded-4 shadow">
            <div class="modal-header p-5 pb-4 border-bottom-0">
                <h1 class="fw-bold mb-0 fs-2">登录MDnote</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-5 pt-0">
                <form class="">
                    <div class="form-floating mb-3">
                        <input type="email" class="form-control rounded-3" id="floatingEmail"
                               placeholder="name@example.com" spellcheck="false">
                        <label for="floatingEmail">Email address</label>
                        <div id="floatingEmailErr" style="color: red; display: none;">该邮箱尚未注册!</div>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="password" class="form-control rounded-3" id="floatingPassword"
                               placeholder="Password" spellcheck="false">
                        <label for="floatingPassword">Password</label>
                        <div id="floatingPasswordErr" style="color: red; display: none;">密码错误!</div>
                    </div>
                    <small class="text-muted">登录即代表你同意我们的用户协议。</small>
                    <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="button" id="signup">登录</button>
                    <small class="text-muted">还没有账户?点击注册，成为我们的一员!</small>
                    <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="button" data-bs-toggle="modal" data-bs-target="#Reg">
                        注册
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="newfile" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content rounded-4 shadow">
            <div class="modal-header p-5 pb-4 border-bottom-0">
                <h1 class="fw-bold mb-0 fs-2">新建Markdown文件</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-5 pt-0">
                <form class="">
                    <label class="text-muted">路径:<span id="newfilepath">未选中文件夹</span></label>
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control rounded-3" id="newfilename"
                               placeholder="文件名" spellcheck="false">
                        <label for="newfilename">文件名</label>
                    </div>
                    <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="button" onclick="createfile()">新建</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="newfolder" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content rounded-4 shadow">
            <div class="modal-header p-5 pb-4 border-bottom-0">
                <h1 class="fw-bold mb-0 fs-2">新建文件夹</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-5 pt-0">
                <form class="">
                    <label class="text-muted">路径:<span id="newfolderpath">未选中文件夹</span></label>
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control rounded-3" id="newfoldername"
                               placeholder="文件夹名" spellcheck="false">
                        <label for="newfoldername">文件夹名</label>
                    </div>
                    <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="button" onclick="createfolder()">新建</button>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="uploadfile" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content rounded-4 shadow">
            <div class="modal-header p-5 pb-4 border-bottom-0">
                <h1 class="fw-bold mb-0 fs-2">上传文件</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-5 pt-0">
                <form class="">
                    <label class="text-muted">是否更改文件名?</label>
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control rounded-3" id="uploadfilemane"
                               placeholder="文件夹名" value="111" spellcheck="false">
                        <label for="uploadfilemane">文件名</label>
                        <div style="color: red;">请注意：相同的云端文件名将覆盖云端原文件!</div>
                    </div>
                    <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="button" id="uploadbutton">上传</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="confirmDelete" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content rounded-4 shadow">
            <div class="modal-header p-5 pb-4 border-bottom-0">
                <h1 class="fw-bold mb-0 fs-2" id="confirmDeleteModalLabel">确认删除</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-5 pt-0">
                <p>您确定要删除这个文件或文件夹吗？此操作不可恢复。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteButton" onclick="deleteItem()">删除</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="confirmDeleteCloud" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content rounded-4 shadow">
            <div class="modal-header p-5 pb-4 border-bottom-0">
                <h1 class="fw-bold mb-0 fs-2">确认删除</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-5 pt-0">
                <p>您确定要删除这个云端文件吗？此操作不可恢复。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteCloudButton">删除</button>
            </div>
        </div>
    </div>
</div>

<nav class="navbar navbar-dark bg-light" style="height: 8vh">
    <div class="container-fluid d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <img src="static/svg/markdown-fill.svg" alt="Bootstrap" width="45px" height="45px">
            <div style="font-size: 30px; margin-left: 10px;">MDnote</div>
        </div>
        <div class="d-flex">
            <button type="button" class="btn btn-outline-secondary" style="margin-right: 15px" onclick="csf.minwindow()">
                <img src="static/svg/dash-lg.svg" alt="Bootstrap" width="15px" height="15px">
            </button>
<!--            <button type="button" class="btn btn-outline-secondary" style="margin-right: 15px" onclick="csf.normal()">
                <img src="static/svg/fullscreen-exit.svg" alt="Bootstrap" width="15px" height="15px">
            </button>-->
            <button type="button" class="btn btn-outline-danger" onclick="csf.exitapp()">
                <img src="static/svg/X-lg.svg" alt="Bootstrap" width="15px" height="15px">
            </button>
        </div>
    </div>
</nav>
<hr style="margin-top: 0; margin-bottom: 0">

<div class="main-content">
    <div class="row content-row" style="height: calc(100vh - 8vh - 5vh);">
        <div class="col-2" style="margin-left: 0; padding-left: 0; padding-right: 0; margin-right: 0; height: 100%">
            <div class="d-flex flex-row">
                <div class="col-md-3 d-flex justify-content-center align-items-center" style="padding-right: 0; margin-right: 0">
                    <div class="nav flex-column nav-pills nav-tabs" id="myTab" role="tablist" style="padding: 0">
                        <button class="nav-link active" id="tab1-tab" data-bs-toggle="pill" data-bs-target="#tab1" type="button" role="tab" style="margin: 0">
                            <img src="static/svg/journal-text.svg" alt="Bootstrap" width="30px" height="30px">
                        </button>
                        <button class="nav-link" id="tab2-tab" data-bs-toggle="pill" data-bs-target="#tab2" type="button" role="tab">
                            <img src="static/svg/cloud-arrow-up.svg" alt="Bootstrap" width="30px" height="30px">
                        </button>
                        <button class="nav-link" id="tab3-tab" data-bs-toggle="pill" data-bs-target="#tab3" type="button" role="tab">
                            <img src="static/svg/person.svg" alt="Bootstrap" width="30px" height="30px">
                        </button>
                        <button class="nav-link" id="tab4-tab" data-bs-toggle="pill" data-bs-target="#tab4" type="button" role="tab">
                            <img src="static/svg/gear.svg" alt="Bootstrap" width="30px" height="30px">
                        </button>
                    </div>
                </div>
                <div class="col-md-9" style="padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0;height:87vh; overflow-y: auto">
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="tab1" role="tabpanel">
                            <div style="display: flex; width: 100%; flex-wrap: wrap;">
                                <button type="button" class="btn btn-light" style="margin: 0; padding: 0; flex: 1;" onclick="openFolder()" data-tooltip="tooltip" data-bs-placement="top" data-bs-title="打开文件夹">
                                    <img src="static/svg/folder2-open.svg" alt="Bootstrap" width="20px" height="20px">
                                </button>
                                <button type="button" class="btn btn-light" style="margin: 0; padding: 0; flex: 1;" data-bs-toggle="modal" data-bs-target="#newfile" data-tooltip="tooltip" data-bs-placement="top" data-bs-title="新建文件">
                                    <img src="static/svg/file-earmark-plus.svg" alt="Bootstrap" width="20px" height="20px">
                                </button>
                                <button type="button" class="btn btn-light" style="margin: 0; padding: 0; flex: 1;" data-bs-toggle="modal" data-bs-target="#newfolder" data-tooltip="tooltip" data-bs-placement="top" data-bs-title="新建文件夹">
                                    <img src="static/svg/folder-plus.svg" alt="Bootstrap" width="20px" height="20px">
                                </button>
                                <button type="button" class="btn btn-light" style="margin: 0; padding: 0; flex: 1;" onclick="freshTree()">
                                    <img src="static/svg/arrow-clockwise.svg" alt="Bootstrap" width="20px" height="20px" data-tooltip="tooltip" data-bs-placement="top" data-bs-title="刷新">
                                </button>
                                <button type="button" class="btn btn-light" style="margin: 0; padding: 0; flex: 1;" data-bs-toggle="modal" data-bs-target="#confirmDelete" data-tooltip="tooltip" data-bs-placement="top" data-bs-title="删除">
                                    <img src="static/svg/trash.svg" alt="Bootstrap" width="20px" height="20px">
                                </button>
                                <button type="button" class="btn btn-light" style="margin: 0; padding: 0; flex: 1;" onclick="uploadfile()" data-tooltip="tooltip" data-bs-placement="top" data-bs-title="上传文件">
                                    <img src="static/svg/cloud-arrow-up.svg" alt="Bootstrap" width="20px" height="20px">
                                </button>
                            </div>
                            <div class="file-tree" id="fileitem">
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab2" role="tabpanel" style="margin-top: 10px">
                            <strong style="font-size: x-large">云端文件列表</strong>
                            <ul class="list-group" style="margin-left: 0; padding-left: 0" id="cloudfileitem">
                            </ul>
                        </div>
                        <div class="tab-pane fade" id="tab3" role="tabpanel">
                            <strong style="font-size: x-large">您尚未登录...</strong>
                            <div class="d-grid gap-3">
                                <button type="button" class="btn btn-secondary btn-lg mx-auto" data-bs-toggle="modal" data-bs-target="#Reg" style="width: 95%; margin-right: 5px">注册</button>
                                <button type="button" class="btn btn-secondary btn-lg mx-auto" data-bs-toggle="modal" data-bs-target="#login" style="width: 95%; margin-right: 5px">登录</button>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab4" role="tabpanel">
                            <strong style="font-size: x-large">编辑器</strong>
                            <div class="input-group mb-3" style="margin-top: 10px">
                                <span class="input-group-text">字号</span>
                                <input type="text" class="form-control" placeholder="16" id="fontSize">
                            </div>
                            <div class="input-group mb-3">
                                <span class="input-group-text" >行间距</span>
                                <input type="text" class="form-control" placeholder="1.5" id="lineHeight">
                            </div>
                            <hr style="margin-bottom: 0">
                            <strong style="font-size: x-large">下载</strong>
                            <div style="margin-top: 10px">下载文件夹</div>
                            <div class="input-group mb-3">
                                <select class="form-select" id="downloadPlace">
                                    <option selected value="0">用户“下载”文件夹</option>
                                    <option value="1">当前打开文件夹</option>
                                    <option value="2" id="downloadFolder">其他</option>
                                </select>
                            </div>
                            <hr style="margin-bottom: 0">
                            <!--<strong style="font-size: x-large">账户</strong>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col" style="margin-left: 0; padding-left: 0; padding-right: 0; margin-right: 0;">
            <div class="input-group" style="width: 100%; height: 100%; padding-left: 0">
                <div class="textarea-container" style="height: 100%; overflow: auto;">
                    <textarea style="width: 100%; height: 100%; border-bottom: none; border-top: none; resize: none" oninput="handleTextareaChange()" id="textMsg" spellcheck="false"></textarea>
                </div>
            </div>
        </div>
        <div class="col textarea-container" id="output" style="margin-left: 0; padding-left: 10px; padding-right: 0; margin-right: 0; height:87vh; overflow-y: auto"></div>
    </div>
</div>
<hr style="margin-top: 0; margin-bottom: 0">
<footer class="d-flex justify-content-end align-items-center" style="height: 5vh; margin-top: 0; padding: 0 10px;">
    <span id="saveStatus">已保存</span>
    <span>&emsp;&emsp;&emsp;</span>
    <span>共<span id="charCount">0</span>个字符</span>
</footer>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div class="toast " id="liveToast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header bg-success" >
            <img src="static/svg/markdown-fill.svg" class="rounded me-2" alt="...">
            <strong class="me-auto">MDnote</strong>
            <small class="text-muted">Just now</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body bg-success-subtle" id="toastText">
            
        </div>
    </div>
</div>
</body>
</html>
